<template>
  <div ref="chartRef" :style="{ width: props.width, height: props.height }" />
</template>

<script setup>
import {
  onActivated,
  onMounted,
  onBeforeUnmount,
  unref,
  ref,
  watch,
  nextTick,
  defineProps,
  reactive,
} from "vue";
import * as echarts from "echarts";
import { shallowRef, markRaw } from "vue";
const props = defineProps({
  //x轴数据
  xAxisData: {
    type: Array,
    default: [],
  },
  // y轴数据
  yAxisData: {
    type: Array,
    default: [],
  },
  //柱形颜色
  color: {
    type: String,
    default: "",
  },

  //标题
  title: {
    type: String,
    default: "",
  },
  //宽度
  width: {
    type: String,
    default: "9.25rem",
  },
  //高度
  height: {
    type: String,
    default: "18.75rem",
  },
});
console.log(props.xAxisData);
const chartRef = ref(null);
const chart = ref(null);
const emergencyDataX = ref([]);
const emergencyDataY = ref([]);
const emergencyDataY1 = ref([]);

const data = [
  { x: "分站1", y: "1323" },
  { x: "分站2", y: "998" },
  { x: "分站3", y: "1221" },
  { x: "分站4", y: "1411" },
  { x: "分站5", y: "1165" },
  { x: "分站6", y: "981" },
  { x: "分站7", y: "1230" },
  { x: "分站8", y: "888" },
  { x: "分站9", y: "987" },
];

const initChart = async () => {
  emergencyDataX.value = props.xAxisData;

  emergencyDataY.value = props.yAxisData;

  if (chart.value != null && chart.value != "" && chart.value != undefined) {
    chart.value.dispose(); //销毁
  }

  let options = {
    title: {
      text: props.title,
      left: "center",
    },

    grid: {
      left: "5%",
      top: "15%",
      right: "5%",
      bottom: "4%",
      containLabel: true,
    },
    dataZoom: [
      {
        type: "slider", // 使用滑动条形式的dataZoom
        show: false,
        xAxisIndex: 0, // 设置为作用于y轴
        start: emergencyDataX.value.length > 10 ? 50 : 0, // 数据窗口范围的起始百分比
        end: emergencyDataX.value.length <= 10 ? 100 : 40, // 数据窗口范围的结束百分比
        // end: 40, // 数据窗口范围的结束百分比
      },
    ],
    xAxis: {
      type: "category", //坐标轴类型,分别有：

      axisLabel: {
        rotate: 45,
      },
      data: emergencyDataX.value,
    },

    yAxis: {
      type: "value",

      axisLabel: {
        show: true,

        fontSize: 14,
        margin: 8,
      },
    },
    series: [
      {
        type: "bar",
        barWidth: "50%",
        data: emergencyDataY.value,
        color: "#91cc75",
        label: {
          show: true,
          formatter: (params) => params.value + "%",
          position: "top",
        },
      },
    ],
  };
  // 初始化echart
  const chartRefWrap = unref(chartRef);
  if (chartRefWrap) {
    chart.value = markRaw(echarts.init(chartRefWrap));
    chart.value.setOption(options, true);
    window.addEventListener("resize", chartsResize);
  }
  //如果x轴数据<=4不执行动态echarts
  if (emergencyDataX.value.length <= 3) return;
  setTimeout(scrollData, 3000);
};

const scrollData = () => {
  let firstElement = emergencyDataX.value.shift();
  emergencyDataX.value.push(firstElement);
  let firstData = emergencyDataY.value.shift();
  let firstData1 = emergencyDataY1.value.shift();
  emergencyDataY.value.push(firstData);
  emergencyDataY1.value.push(firstData1);
  chart.value.setOption({
    xAxis: {
      data: emergencyDataX.value,
    },
    series:
      // emergencyDataY.value
      [
        { name: "平均时长", data: emergencyDataY.value },
        // { name: "已采购量", data: emergencyDataY1.value },
      ],
  });

  //如果x轴数据<=4不执行动态echarts
  if (emergencyDataX.value.length <= 4) return;
  // 每3秒切换
  setTimeout(scrollData, 3000);
};

const chartsResize = () => {
  chart.value && chart.value.resize();
};

watch(
  () => props.xAxisData,
  (val) => {
    console.log(
      props.xAxisData,
      Array.isArray(val),
      props.title,
      "props.xAxisData"
    );
    if (Array.isArray(val)) {
      nextTick(() => {
        initChart();
      });
    }
  }
);
</script>

<style lang="scss" scoped></style>